import { Modal, Form ,Input , Button} from 'antd';
import React from 'react';
import '../Modal_1/Modal_1.css'

function Modal_2(props){
    // 编辑模态框默认隐藏
    const [visible, setVisible] = React.useState(false);
    // 点击编辑模态框出现
    const showModal = () => {
        setVisible(true);
    };
    // 点击确认模态框消失
    const handleOk = () => {
        setVisible(false);
    };

    //   点击取消模态框消失
    const handleCancel = () => {
        setVisible(false);
    };
    
    return (
        <>
        <Button type="link" onClick={showModal}>
            编辑
        </Button>
        {/* 第一个模态框 */}
        <Modal
            height="100"
            title="编辑"
            visible={visible}
            onCancel={() => handleCancel()}
            footer={[
                <Button className="Ok" onClick={handleOk}>确认</Button>,
                <Button onClick={handleCancel}>取消</Button>
            ]}
        >
            <div>
                <p>角色名称：</p>
                <Form.Item>
                    <Input disabled  value={props.name.role_name}/>
                </Form.Item>
                <p>账号：</p>
                <Form.Item>
                    <Input value={props.name.admin}/>
                </Form.Item>
                <p>密码：</p>
                <Form.Item>
                    <Input value={props.name.password}/>
                </Form.Item>
            </div>
        </Modal>
    </>
    )        
}
export default Modal_2;